<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Alert | Material</title>

    <link rel="stylesheet" href="../../assets/css/main/bootstrap.min.css">

    <link rel="stylesheet" href="../../assets/css/main/material-design-icons.min.css">

    <link rel="stylesheet" href="../../assets/css/main/material.min.css">

    <link rel="stylesheet" href="../../assets/css/main/ripples.min.css">

    <link rel="stylesheet" href="../../assets/css/main/owl.carousel.min.css">

    <link rel="stylesheet" href="../../assets/css/main/magnific-popup.css">

    <link rel="stylesheet" href="assets/css/animate1.css">

    <link rel="stylesheet" href="../../assets/css/main/style.css">

    <link rel="stylesheet" href="../../assets/css/main/responsive.css">

    <link rel="stylesheet" type="text/css" href="../../assets/css/colors/indigo.css" media="screen"/>
</head>
<body>

<header id="header">
    <div class="navbar-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <nav class="navbar navbar-expand-lg">
                        <a class="navbar-brand" href="../../index.html">
                            <img src="../../assets/images/logo.png" alt="Logo">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
                            <ul id="nav" class="navbar-nav ml-auto">
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Home <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="../../index.html">Home V1</a></li>
                                        <li class="nav-item"><a href="index-2.html">Home V2</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Pages <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="about-us.html">About Us 1</a></li>
                                        <li class="nav-item"><a href="about-us2.html">About Us 2</a></li>
                                        <li class="nav-item"><a href="team.html">Team Members</a></li>
                                        <li class="nav-item"><a href="features.html">Features</a></li>
                                        <li class="nav-item"><a href="team-single.html">Team Single Page</a></li>
                                        <li class="nav-item"><a href="services.html">Services</a></li>
                                        <li class="nav-item"><a href="404.html">404</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item active">
                                    <a class="page-scroll" href="#">Components <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="tab.html">Tabs</a></li>
                                        <li class="nav-item"><a class="active" href="alert.html">Alert</a></li>
                                        <li class="nav-item"><a href="accordion.html">Accordions</a></li>
                                        <li class="nav-item"><a href="pricing.html">Pricing Tables</a></li>
                                        <li class="nav-item"><a href="buttons.html">Buttons</a></li>
                                        <li class="nav-item"><a href="icons.html">Icons</a></li>
                                        <li class="nav-item"><a href="carousel.html">Carousel</a></li>
                                        <li class="nav-item"><a href="counter.html">Counter</a></li>
                                        <li class="nav-item"><a href="map.html">Google Map</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Portfolio <span><i class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="portfolio-2.html">Portfolio 2 columns</a></li>
                                        <li class="nav-item"><a href="portfolio.html">Portfolio 3 columns</a></li>
                                        <li class="nav-item"><a href="portfolio-single.html">Portfolio Single</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Blog <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="blog.html">Blog Page</a></li>
                                        <li class="nav-item"><a href="blog-single.html">Blog Single Page</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Contact <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu left-menu">
                                        <li class="nav-item"><a href="contact-us.html">Contact Us 1</a></li>
                                        <li class="nav-item"><a href="contact-us2.html">Contact Us 2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                        <div class="search-icon">
<span class="open-search">
<i class="mdi mdi-magnify btn btn-common"></i>
</span>
                        </div>
                        <form role="search" class="navbar-form">
                            <div class="container">
                                <div class="row">
                                    <div class="form-group has-feedback">
                                        <input type="text" placeholder="Type and search ..." class="form-control">
                                        <div class="close"><i class="mdi mdi-close"></i></div>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>


<section class="page-title-section section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="title-center">
                    <div class="title-middle">
                        <h2 class="page-tagline">Temaplate Shortcode</h2>
                        <h1 class="page-title">Alerts</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="Material-alert-section section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12 wow animated fadeInUp" data-wow-delay=".2s">
                <div class="alert alert-success" role="alert">
                    <a href="#" class="alert-link">Well done! You successfully read this important alert message.</a>
                </div>
                <div class="alert alert-info" role="alert">
                    <a href="#" class="alert-link">Heads up! This alert needs your attention, but it's not super
                        important.</a>
                </div>
                <div class="alert alert-warning" role="alert">
                    <a href="#" class="alert-link">Warning! Better check yourself, you're not looking too good.</a>
                </div>
                <div class="alert alert-danger" role="alert">
                    <a href="#" class="alert-link">Oh snap! Change a few things up and try submitting again.</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 wow animated fadeInUp" data-wow-delay=".4s">
                <div class="alert alert-dismissible alert-success">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <h4>Success!</h4>
                    <p>Well done! You successfully read this important alert message.
                        <a href="javascript:void(0)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
                </div>
                <div class="alert alert-dismissible alert-warning">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <h4>Warning!</h4>
                    <p>Well done! You successfully read this important alert message.
                        <a href="javascript:void(0)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
                </div>
                <div class="alert alert-dismissible alert-danger">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <h4>Danger!</h4>
                    <p>Well done! You successfully read this important alert message.
                        <a href="javascript:void(0)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
                </div>
                <div class="alert alert-dismissible alert-info">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <h4>Info!</h4>
                    <p>Well done! You successfully read this important alert message.
                        <a href="javascript:void(0)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
                </div>
            </div>
        </div>
    </div>
</section>


<footer class="page-footer center-on-small-only  pt-0 footer-widget-container">

    <div class="container pt-5 mb-5">
        <div class="row">

            <div class="col-md-6 col-lg-3 col-xl-3 footer-contact-widget">
                <h3 class="footer-title">About Us</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates eos minus expedita illo
                    recusandae
                    esse labore obcaecati nisi amet quia odio sapiente! Fugiat, voluptatibus nemo necessitatibus
                    porro.</p>
                <ul>
                    <li>
                        <a href="#"><i class="mdi mdi-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-instagram"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-github"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-linkedin"></i></a>
                    </li>
                </ul>
            </div>


            <div class="col-md-6 col-lg-3 col-xl-3 recent-widget">
                <h3 class="footer-title">Recent Posts</h3>
                <ul class="image-list">
                    <li>
                        <figure class="overlay">
                            <img class="img-fluid" src="assets/images/art/a1.jpg" alt="">
                            <figcaption><a href="blog-single.html"><i class="mdi mdi-link-variant from-top icon-xs"></i></a>
                            </figcaption>
                        </figure>
                        <div class="post-content">
                            <h6 class="post-title"><a href="blog-single.html">Fusce gravida tortor felis</a></h6>
                            <div class="meta"><span class="date">12 Jan 2019</span></div>
                        </div>
                    </li>
                    <li>
                        <figure class="overlay">
                            <img class="img-fluid" src="assets/images/art/a2.jpg" alt="">
                            <figcaption><a href="blog-single.html"><i class="mdi mdi-link-variant from-top icon-xs"></i></a>
                            </figcaption>
                        </figure>
                        <div class="post-content">
                            <h6 class="post-title"><a href="blog-single.html">Ornare Nullam Risus Cursus</a></h6>
                            <div class="meta"><span class="date">12 Jan 2019</span></div>
                        </div>
                    </li>
                    <li>
                        <figure class="overlay">
                            <img class="img-fluid" src="assets/images/art/a3.jpg" alt="">
                            <figcaption><a href="blog-single.html"><i class="mdi mdi-link-variant from-top icon-xs"></i></a>
                            </figcaption>
                        </figure>
                        <div class="post-content">
                            <h6 class="post-title"><a href="blog-single.html">Euismod Nullam Fusce Dapibus</a></h6>
                            <div class="meta"><span class="date">12 Jan 2019</span></div>
                        </div>
                    </li>
                </ul>
            </div>


            <div class="col-md-6 col-lg-3 col-xl-3 link-widget">
                <h3 class="footer-title">Get in Touch</h3>
                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem
                    malesuada
                    magna mollis euismod. Praesent commodo cursus.</p>
                <div class="mt-3"></div>
                <ul class="icon-list">
                    <li><i class="mdi mdi-map-marker"></i> 548 San Francisco, CA</li>
                    <li><i class="mdi mdi-email"></i> <a
                            href="/cdn-cgi/l/email-protection#9cf1fdf5f0dcf1fde8f9eef5fdf0b2fff3f1"
                            class="nocolor"><span class="__cf_email__"
                                                  data-cfemail="016c60686d416c6075647368606d2f626e6c">[email&#160;protected]</span></a>
                    </li>
                    <li><i class="mdi mdi-phone-classic"></i> +00 (123) 456 78 90</li>
                    <li><i class="mdi mdi-cellphone-iphone"></i> +00 (121) 455 47 54</li>
                </ul>
            </div>


            <div class="col-md-6 col-lg-3 col-xl-3 footer-contact">
                <h3 class="footer-title">Subscribe</h3>
                <div class="widget">
                    <div class="newsletter-wrapper">
                        <form method="post" id="subscribe-form" name="subscribe-form" class="validate">
                            <div class="form-group">
                                <input type="email" value="" name="EMAIL" class="email form-control" id="EMAIL"
                                       placeholder="Email Address" required="">
                                <button type="submit" name="subscribe" id="subscribe" class="btn btn-common pull-right">
                                    Join
                                </button>
                                <div class="clearfix"></div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="widget">
                    <h5 class="widget-title">Useful Links</h5>
                    <ul class="unordered-list">
                        <li><a href="#" class="nocolor">Terms of Use</a></li>
                        <li><a href="#" class="nocolor">Privacy Policy</a></li>
                        <li><a href="#" class="nocolor">Company Profile</a></li>
                        <li><a href="#" class="nocolor">Why Choose Us</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>


    <div class="footer-copyright">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <p>By <a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a></p>
                </div>
            </div>
        </div>
    </div>

</footer>


<a href="#" class="back-to-top">
    <div class="ripple-container"></div>
    <i class="mdi mdi-arrow-up">
    </i>
</a>

<div id="preloader">
    <div class="loader" id="loader-1"></div>
</div>


<script data-cfasync="false" src="../../assets/js/email-decode.min.js"></script>
<script src="../../assets/js/modernizr-3.7.1.min.js"></script>
<script src="assets/js/vendor/jquery-3.5.1-min.js"></script>
<script src="../../assets/js/popper.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/jquery.mixitup.min.js"></script>
<script src="../../assets/js/jquery.inview.js"></script>
<script src="../../assets/js/jquery.counterup.min.js"></script>
<script src="../../assets/js/material.min.js"></script>
<script src="../../assets/js/ripples.min.js"></script>
<script src="../../assets/js/owl.carousel.min.js"></script>
<script src="../../assets/js/form-validator.min.js"></script>
<script src="../../assets/js/contact-form-script.min.js"></script>
<script src="../../assets/js/wow.js"></script>
<script src="../../assets/js/jquery.magnific-popup.min.js"></script>
<script src="../../assets/js/main.js"></script>
</body>
</html>